.safety {
  padding-bottom: constant(safe-area-inset-bottom); // 核心代码
      padding-bottom: env(safe-area-inset-bottom); // 核心代码A
}

.hid1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fl {
  display: flex;
}

.flex_c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
  align-items: center;
}

.flex_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex_a {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex_y_b {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flex_y_a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex_y_c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hid1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hid2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.m-flex {
  display: flex;
}
.flex-r {
  display: flex;
  flex-direction: row;
}
.flex-c {
  display: flex;
  flex-direction: column;
}
.flex-c-bt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flex-c-bt-bt {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: space-between;
}
.flex-c-fe-fe {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  justify-content: flex-end;
}
.flex-c-fs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.flex-c-ce {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.flex-r-je {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.flex-r-c {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.flex-r-bt {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex-c-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-r-c-ar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}
.flex-r-fs-ar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}
.flex-c-c-fs {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
}
.flex-c-fs-c {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
.flex-c-c-fe {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-end;
}
.flex-c-fe-c {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
}
.flex-r-c-c {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.flex-r-c-bt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.flex-r-c-fe {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.flex-r-c-fs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.flex-c-c-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flex-c-c-bt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.flex-fs {
  display: flex;
  justify-content: flex-start;
}
.flex-r-fs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.flex-c-fs-fs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.flex-r-fs-fs {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.flex-r-fe {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.flex-r-fs-bt {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
.flex-r-fs-c {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
}
.flex-r-fe-bt {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}


.slide-enter-active, .slide-leave-active {
  transition: all 0.3s
}

.slide-enter-from, .slide-leave-to {
  transform: translate3d(100%, 0, 0)
}

.list-enter-active, .list-leave-active {
  transition: all 0.3s;
}

.list-enter-from, .list-leave-to {
  height: 0 !important;
}

@keyframes rotate {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}